<template>

    <el-card class="box-card">
        <div class="input-container">          
                <el-input placeholder="请输入用户名" v-model="username"></el-input>
                <el-input placeholder="请输入密码" v-model="password" show-password></el-input>

            <el-button @click="handleLogin">默认按钮</el-button>
        </div>
    </el-card>

</template>


<script>
import {login} from "@/api/user"
export default {
    name: 'LoginInput',
    data() {
    return {
    username: '',
    password: ''
}
},
    methods: {
    async handleLogin() {
    console.log('登录按钮被点击，用户名：', this.username, '密码：', this.password);
        const data = await login({username: this.username, password: this.password})
        console.log(data)
}
}
}
</script>

<style scoped>
.box-card {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: transparent;
    overflow: hidden;
    border: none;
    box-shadow: none;
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.el-input{
    height: 100px;
}

.el-button{
    margin-top: 60px;
}
</style>